<template>
	<view>
		<!-- 轮播图 -->
		<view class="index-swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000">
				<swiper-item v-for="(item,index) in goodsInfo.pics" :key="index">
					<image :src="item.pics_mid" @click="preview(index)" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品信息区 -->
		<view class="goodsInfo-box">
			<!-- 商品价格 -->
			<view class="price">￥{{goodsInfo.goods_price}}</view>
			<!-- 信息主体区域 -->
			<view class="goodsInfo-body">
				<!-- 商品名称 -->
				<view class="goods-name">{{goodsInfo.goods_name}}</view>
				<!-- 收藏 -->
				<navigator class="favi">
					<text class="iconfont icon-shoucang"></text>
					<text>收藏</text>
				</navigator>
			</view>
		</view>
		<view class="goods-text">
			<!-- 图文详情-->
			<text>图文详情</text>
		</view>
		<!-- 富文本		 -->
		<view>
			<rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
		</view>

		<!-- 工具条-->
		<view class="goods-tool">
			<view class="tool-item">
				<text class="iconfont icon-kefu"></text>
				<text>客服</text>
				<button type="default" open-type="contact"></button>
			</view>

			<view class="tool-item">
				<text class="iconfont icon-fenxiang"></text>
				<text>分享</text>
				<button type="default" open-type="share"></button>
			</view>

			<view class="tool-item">
				<text class="iconfont icon-gouwuche" @tap="gotoCart"></text>
				<text>购物车</text>
			</view>

			<view class="common add-cart" @tap="addCart">
				加入购物车
			</view>
			<view class="common buy" @tap="buy">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParam: {
					goods_id: 0
				},
				goodsInfo: [],
			}
		},
		onLoad(e) {

			this.queryParam.goods_id = e.a;
			this.getGoodsInfo()
		},
		methods: {
			// 获取商品信息
			async getGoodsInfo() {
				const res = await this.$Https({
					url: '/goods/detail',
					data: this.queryParam
				});
				this.goodsInfo = res.message;
				console.log(this.goodsInfo);
			},
			// 预览图片
			preview(index) {
				uni.previewImage({
					current: index,
					urls: this.goodsInfo.pics.map(x => x.pics_big)
				})
			},
			// 跳到购物车
			gotoCart() {
				// 使用uni.navigateTo 无法跳转到tabBar的页面
				// 需要使用uni.switchTab 进行跳转
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			// 加入购物车
			addCart() {
				// 1.从本地缓存中去除购物车 数组类型
				let cart = uni.getStorageSync('cart') || [];
				console.log(cart);
				// 2.在购物车中查询是否已加入该商品
				let index = cart.findIndex(v => v.goods_id == this.goodsInfo.goods_id);
				// 3.如果没有,将该商品加入,并添加数量和选中状态属性
				if (index == -1) {
					this.goodsInfo.cartNum = 1;
					this.goodsInfo.checked = true;
					cart.push(this.goodsInfo);
				} else {
					// 4.如果有 将该商品数量加1
					cart[index].cartNum++;
				}
				// 5.将购物车数据写入缓存中
				uni.setStorageSync('cart', cart);
				// 6.弹出消息
				uni.showToast({
					title: "加入成功"
				})
			},
			// 立即购买
			buy() {
				this.goodsInfo.cartNum = 1; //购买数量
				this.goodsInfo.checked = true;
				uni.setStorageSync('buy', this.goodsInfo);
				uni.navigateTo({
					url: '../../subpkg2/pay/pay'
				})

			}
		}
	}
</script>

<style lang="scss">
	// 轮播图样式
	swiper {
		height: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 美化商品信息区域样式
	.goodsInfo-box {
		padding: 10px;
		padding-right: 0;
		border-bottom: 5px solid #efefef;

		.price {
			color: #ddaacc;
			font-size: 18px;
			margin: 10px 0;
		}

		.goodsInfo-body {
			display: flex;
			justify-content: space-between;
		}

		.goods-name {
			font-size: 13px;
			margin-right: 10px;
			color: gray;
		}

		.favi {
			width: 120px;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-left: 3px solid #efefef;
			color: gray;
		}
	}

	.goods-text {
		color: #ddaacc;
		font-size: 34px;
		font-weight: 600;
		padding: 15px;
	}

	.goods-tool {
		width: 100%;
		height: 90rpx;
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;

		.tool-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			background-color: #ffffff;
			font-style: 26rpx;
			position: relative;

			button {
				width: 60px;
				height: 100%;
				margin: 0 20%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}

		.common {
			flex: 2;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-weight: 600;
			color: #fff;

			&.add-cart {
				background-color: #ddaacc;
			}

			&.buy {
				background-color: #eb4450;
			}
		}
	}
</style>